<template>
  <div class="mid-block1">
    <div class="midtab clearfix">
      <div class="tab-left">
        <swiper ref="swiperTop" class="swiper" :options="swiperOptionTop">
          <template v-for="(item, index) in playerList">
            <swiper-slide :key="index" style="height: 450px">
              <ezuikit
                :camera="item"
                :width="800"
                :height="450"
                :regulate="true"
                template-type="standard"
              />
              <!--              <video :id="item.id" :src="item.url" width="100%" height="450" autoplay controls playsInline webkit-playsinline />-->
            </swiper-slide>
          </template>
        </swiper>
      </div>
      <!--      <ul id="tabLeft" class="tab-left">-->
      <!--        <li v-for="(item,index) in playerList" v-if="index===active" :key="index" class="tab-panel on">-->
      <!--          <div class="player"><d-player-->
      <!--            :ref="'player-'+index"-->
      <!--            :options="{-->
      <!--              video: {-->
      <!--                url: item.url,-->
      <!--                type: 'hls'-->
      <!--              },-->
      <!--              autoplay: true-->
      <!--            }"-->
      <!--          /></div>-->
      <!--        </li>-->
      <!--      </ul>-->
      <div class="tab-right" style="position: relative">
        <div class="prev" style="top: -10px">
          <i class="el-icon-caret-top" style="color: white" />
        </div>
        <swiper
          ref="swiperThumbs"
          class="swiper"
          :options="swiperOption"
          style="height: 410px; margin: 20px 0"
          @click-slide="handleClickSlide"
        >
          <template v-for="(item, index) in playerList">
            <swiper-slide
              :key="index"
              style="height: 95px; position: relative"
              :class="{ active: active === index }"
            >
              <ezuikit :camera="item" :width="156" :height="92" />
              <!--              <video :id="item.id+ 'Thumbs'" :src="item.url" width="100%" height="95" playsInline webkit-playsinline />-->
              <div
                class="title text-ellipsis"
                style="
                  position: absolute;
                  color: #ffffff;
                  background: linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0) 0%,
                    rgba(0, 0, 0, 1) 100%
                  );
                  z-index: 10;
                  left: 0;
                  right: 0;
                  padding: 0 10px;
                  bottom: 0;
                  font-size: 12px;
                  height: 45px;
                  line-height: 70px;
                "
              >
                {{ item.name }}
              </div>
            </swiper-slide>
          </template>
        </swiper>
        <div class="next" style="bottom: -10px">
          <i class="el-icon-caret-bottom" style="color: white" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

import { postHandle } from "@/api";
import Ezuikit from "../../../../../components/ys/ezuikit";
export default {
  name: "VideoShow",

  components: {
    Ezuikit,
    Swiper,
    SwiperSlide,
  },

  props: {
    newSpaceId: {
      type: String,
    },
  },

  data() {
    return {
      calleft: 0,
      active: 0,
      player: null,
      playerList: [],
      swiperOptionTop: {
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
      },
      swiperOption: {
        direction: "vertical",
        loopedSlides: 4, // looped slides should be the same
        spaceBetween: 10,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
        height: 410,
        navigation: {
          nextEl: ".next",
          prevEl: ".prev",
        },
      },
    };
  },

  computed: {
    spaceId() {
      return this.$store.state.project.spaceId;
    },
  },

  watch: {
    newSpaceId(v) {
      if (v) this.getData();
    },
  },

  directives: {
    swiper: directive,
  },

  created() {
    this.getData();
  },

  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$swiper;
      const swiperThumbs = this.$refs.swiperThumbs.$swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  },

  methods: {
    getData() {
      postHandle("/api/v1/welder-sbtx-second/video-comb/list", {
        d: {
          filters: [
            {
              field: "spaceId",
              operator: "EQUALS",
              value: this.newSpaceId || this.spaceId,
            },
          ],
          sorts: [{ field: "sequence", isDesc: false }],
        },
      }).then((res) => {
        this.playerList = res.result;
      });
    },
    handleClickSlide(e) {
      this.active = e;
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.$swiper;
        swiperTop.slideTo(e, 1000, false);
      });
    },
  },
};
</script>

<style>
.tab-right .dplayer-controller {
  display: none;
}
</style>